<template>
	<view>
		<view style="display: flex;" class="list-item" v-for="(item, index) in carList" :key="index">
			<label class="radio">
				<radio :checked="item.state" @click="changeCarListState(item)"/>
			</label>
			<view class="left">
				<image :src="item.image" style="height: 100px;" mode="heightFix"></image>
			</view>
			<view class="right">
				<view class="title">{{ item.title }}</view>
				<view class="title">
					<button size="mini" type="primary" @click="subToCarList(item)">-</button>
					<text>{{ item.count }}</text>
					<button size="mini" type="primary"@click="addToCarList(item)">+</button>
				</view>
				<view class="title">{{ item.price }}</view>
			</view>
		</view>
		
		<view class="">
			<label class="radio">
				<radio :checked="totalState" @click="changeAllCarListState(!totalState)"/><text>全选</text>
			</label>
			<text>总价： {{ totalPrice }}</text>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			...mapState({
				carList: state => state.car.carList
			}),
			totalPrice() {
				return this.carList.filter(v => v.state)
					.reduce((p, n) => {
						return p + n.count * n.price
					}, 0)
			},
			totalState() {
				return this.carList.every(v => v.state)
			}
		},
		methods: {
			...mapMutations(['addToCarList', 'subToCarList', 'changeCarListState', 'changeAllCarListState'])
		}
	}
</script>

<style lang="scss">

</style>
